<template>
    <el-header class="header">
        <el-header class="header_he">
            <div>
                <img src="@/assets/images/systemManagement/菜单.png" alt="">
                <span>系统管理</span>
            </div>
            <div>
                <img :src="imgUrl" alt="">
                <span>{{userName}}</span>
            </div>
        </el-header>
    </el-header>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref='ruleFormRef' :rules="rules">
        <el-form-item label="设备销售奖励(股)" prop="salesIncentive">
            <el-input v-model="form.salesIncentive" />
        </el-form-item>
        <el-form-item label="设备销售直推奖励(股)" prop="salesDirectReferral">
            <el-input v-model="form.salesDirectReferral" />
        </el-form-item>
        <el-form-item label="股价转换余额比例" class="middle" prop="conversionRatio">
            <el-input v-model="form.conversionRatio" />
        </el-form-item>
        <el-form-item label="回收价格" prop="recoveryPrice">
            <el-input v-model="form.recoveryPrice" />
            元
        </el-form-item>
        <el-form-item label="设备租金比例" prop="rentalRatioOne">
            1-3台
            <el-input v-model="form.rentalRatioOne" />
        </el-form-item>
        <el-form-item label="设备租金比例" prop="rentalRatioTwo">
            4-10台
            <el-input v-model="form.rentalRatioTwo" />
        </el-form-item>
        <el-form-item label="设备租金比例" prop="rentalRatioThree">
            11-18台
            <el-input v-model="form.rentalRatioThree" />
        </el-form-item>
        <el-form-item label="设备租金比例" prop="rentalRatioFour">
            19台及以上
            <el-input v-model="form.rentalRatioFour" />
        </el-form-item>
        <el-form-item class="buton">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
        
    </el-form>
</template>

<script setup>
    import { ElMessage } from 'element-plus'; // 导入消息提示组件
    import { ref,reactive} from 'vue';
    import yonghuImgUrl from '@/assets/images/systemManagement/菜单.png';
    let imgUrl =ref(yonghuImgUrl);
    let userName = ref("用户手机号");
    const ruleFormRef = ref(null);
    let form = reactive({
        salesIncentive:'',
        salesDirectReferral:'',
        conversionRatio:'',
        recoveryPrice:'',
        rentalRatioOne:'',
        rentalRatioTwo:'',
        rentalRatioThree:'',
        rentalRatioFour:''
    })
    const lastform = ref({ ...form }); 
    //验证
    const rules = reactive({
    salesIncentive: [
        { required: true, message: '请输入设备销售奖励', trigger: 'blur' },
    ],
    salesDirectReferral: [
        { required: true, message: '请输入销售直推奖励', trigger: 'blur' },
    ],
    conversionRatio: [
        { required: true, message: '请输入股价转换余额比例', trigger: 'blur' },
    ],
    recoveryPrice: [
        { required: true, message: '请输入回收价格', trigger: 'blur' },
    ],
    rentalRatioOne: [
        { required: true, message: '请输入1-3台租金比例', trigger: 'blur' },
    ],
    rentalRatioTwo: [
        { required: true, message: '请输入4-10台租金比例', trigger: 'blur' },
    ],
    rentalRatioThree: [
        { required: true, message: '请输入11-18台租金比例', trigger: 'blur' },
    ],
    rentalRatioFour: [
        { required: true, message: '请输入19台及以上租金比例', trigger: 'blur' },
    ]
});
const submitForm = async () => {
  if (!ruleFormRef.value) return;
  try {
    await ruleFormRef.value.validate();
    ElMessage.success('修改成功！');
    lastform.value = { ...form }; 
    // console.log('保存后的值：', lastform.value);
  } catch (error) {
    ElMessage.error('请完善表单信息');
    return false;
  }
};

const resetForm = () => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.resetFields();
  Object.assign(form, lastform.value); 
  ElMessage.info('已取消修改');
//   console.log('重置后的值：', form);
};

</script>

<style lang="less" scoped>
    .header{
        background: #fff;
        height:80px;
        padding: 0;
        border-bottom: 1px solid  #ccc;
        box-shadow: 0px 1px 2px 0px #ccc;
        img{
            width:20px;
            height:20px;
        }
        span{
            display: inline-block;
            padding:0px 10px;
        }
        div{
            display: flex;
            align-items: center;
        }
        .header_he{
            height:45px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;
        }
    }
    .el-input{
        width:300px;
    }
    .middle{
        margin-top: 100px;
    }
    .el-form{
        padding-left: 100px;
        padding-top:100px;
    }
    .bit1{
        margin-left: 120px;
    }
    .buton{
        padding-left: 160px;
    }
</style>